import { deleteDeploy } from '@/api';
import { useDeployContractList } from '@/hooks/useDeployContractList';
import useAppStore from '@ide/store';
import React, { useCallback, useEffect, useState } from 'react';
import { Button, Table } from 'tea-component';
import { Modal } from 'tea-component/lib/modal/Modal';

const { pageable, autotip, scrollable } = Table.addons;

const ManageDeployContract = React.forwardRef(() => {
  const [isLoading, setIsLoading] = useState(false);
  const { setting, editDeployContractsVisible, setEditDeployContractsVisible, getDeployContracts } = useAppStore();
  const { list, pageIndex, recordCount, pageSize, getDeployContractList, setPageIndex } = useDeployContractList();
  // const [list, setList] = useState<any[]>([]);
  // const [pageIndex, setPageIndex] = useState<number>(1);
  // const [recordCount, setRecordCount] = useState<number>(0);
  // const getList = useCallback(async () => {
  //   const res = await hasDeployContractList({
  //     pageSize: 10,
  //     page: pageIndex
  //   });
  //   if (res.data?.hasDeployList?.length) {
  //     setRecordCount(res.data?.total || 0);
  //     setList(res.data?.hasDeployList || []);
  //   }
  // }, [pageIndex]);
  const deleteContract = useCallback((contractName:string) => {
    deleteDeploy({
      contractName
    }).then(() => {
      getList();
      getDeployContracts();
    });
  }, [pageIndex, pageSize]);
  const getList = useCallback(async () => {
    setIsLoading(true);
    await getDeployContractList({
      page: pageIndex,
      pageSize
    });
    setIsLoading(false);
  }, [pageIndex, pageSize]);
  useEffect(() => {
    if (editDeployContractsVisible) {
      getList();
    }
  }, [editDeployContractsVisible]);
  return <Modal
    maskClosable
    visible={editDeployContractsVisible}
    caption="已部署合约列表"
    onClose={() => setEditDeployContractsVisible(false)}
    className={`${setting.theme}_model`}
    size={600}
    maskStyle={{
      backgroundColor: 'rgba(0,0,0,0.2)'
    }}
  >
    <Modal.Body>
      <div className='dialog-table'>
        <div className='dialog-sub-t'>此处展示已部署的合约，删除后选择合约（已部署）下拉选项处将不再展示。</div>
        <Table
          columns={[{
            key: 'date',
            header: '时间'
          },
          {
            key: 'name',
            header: '合约名称'
          },
          {
            key: 'ip',
            header: '操作',
            width: 80,
            render: ({ name }) => (<>{
              <Button type="link" onClick={() => deleteContract(name)}>删除</Button>
            }</>)
          }]}
          records={list}
          recordKey="name"
          addons={[pageable(
            {
              onPagingChange: ({ pageIndex }) => {
                setPageIndex(pageIndex || 0);
              },
              pageSizeVisible: false,
              pageIndex,
              recordCount,
              pageIndexVisible: false,
              endJumpVisible: false
            }),
          autotip({
            emptyText: '暂无数据',
            isLoading
          }),
          scrollable({
            maxHeight:480,
            minHeight:480
          })]
          }
        />
      </div>
    </Modal.Body>
    {/* <Modal.Footer>
      <Button type="primary" onClick={handleSubmit(submit)}>
        确定
      </Button>
      <Button type="weak" onClick={onClose}>
        取消
      </Button>
    </Modal.Footer> */}
  </Modal>;
});
ManageDeployContract.displayName = 'ManageDeployContract';

export default ManageDeployContract;
